<template>
  <view class="me">
    <view class="top">
      <!-- 未登录授权 -->
      <view class="top1" v-if="!isUser">
        <view class="bg"></view>
        <view class="bg2"></view>
        <view class="imgBox"
          ><image src="@/static/img/logoS.gif" mode=""
        /></view>
        <button @click="getUserInfo">登录授权</button>
      </view>
      <!-- 已登录授权 -->
      <view class="top1" v-else>
        <view
          class="bg"
          :style="{ background: 'url(' + userInfo.avatarUrl + ')center/cover' }"
        ></view>
        <view class="bg2"></view>
        <view class="imgBox"><image :src="userInfo.avatarUrl" mode="" /></view>
        <view class="name">
          {{ userInfo.nickName }}
        </view>
      </view>
    </view>
    <view class="list">
      <view class="playList">
        <button @click="ShowList">
          <image src="@/static/img/lb.png" mode="" /> 播放列表 <text> ></text>
        </button>
      </view>
      <view class="service">
        <button show-message-card open-type="contact">
          <image src="@/static/img/kf.png" mode="" />联系客服 <text> ></text>
        </button>
      </view>
      <view class="about">
        <button @click="showPop">
          <image src="@/static/img/gywm.png" mode="" />关于我们 <text> ></text>
        </button>
      </view>
      <!-- 分享 -->
      <view class="Share">
        <button open-type="share">
          <image src="@/static/img/share.png" mode="" />分享 <text> ></text>
        </button>
      </view>
      <view class="quit" v-if="isUser">
        <button @click="quit">
          <image src="@/static/img/tc.png" mode="" />退出 <text> ></text>
        </button>
      </view>
    </view>
    <!-- 播放列表 -->
    <view class="showPlaylists" v-if="isShowList">
      <ShowPlayList @close="close"></ShowPlayList>
    </view>
  </view>
</template>

<script>
import ShowPlayList from "../../components/ShowPlayList"; //引入播放列表
export default {
  components: {
    ShowPlayList,
  },
  data() {
    return {
      userInfo: "",
      isUser: false, //判断是否已经授权
      isShowList: false,
    };
  },
  onLoad() {
    if (uni.getStorageSync("userInfo").nickName != undefined) {
      this.isUser = true;
      this.userInfo = uni.getStorageSync("userInfo");
    }
  },
  //监听分享
  onShareAppMessage(res) {
    console.log(res.from);
    if (res.from === "button") {
      // 来自页面内分享按钮
    }
    return {
      title: "燚淼音乐",
      path: "/pages/index/index",
    };
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      uni.getUserProfile({
        desc: "注册",
        success: (res) => {
          this.userInfo = JSON.parse(res.rawData);
          uni.setStorageSync("userInfo", this.userInfo);
          this.isUser = true;
          this.userInfo = uni.getStorageSync("userInfo");
          uni.showToast({
            title: "授权成功",
            duration: 2000,
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    //显示消息提示框
    showPop() {
      uni.showModal({
        title: "关于我们",
        content: "一个热爱开发小程序的学生,交流QQ:487729947",
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
          } else if (res.cancel) {
          }
        },
      });
    },

    // 退出
    quit() {
      uni.showModal({
        title: "提示",
        content: "确定退出?",
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            this.isUser = false;
          }
        },
      });
    },
    // 显示播放列表
    ShowList() {
      this.isShowList = true;
    },
    // 关闭播放列表
    close() {
      this.isShowList = false;
    },
    share() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
  },
};
</script>

<style lang="less">
.me {
  .top {
    position: relative;
    width: 750rpx;
    height: 400rpx;
    border-radius: 0 0 80rpx 80rpx;
    box-shadow: 2px 2px #ccc;
    text-align: center;
    border-top: 2rpx solid transparent;
    .top1 {
      margin-top: 20rpx;
      .bg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: url("@/static/img/bgg.jpg");
        filter: blur(6px);
      }
      .bg2 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.2);
        filter: blur(4px);
      }
      .imgBox {
        margin: 35rpx 0 20rpx 0;
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        margin-left: 50%;
        transform: translateX(-50%);
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      button {
        background: rgba(71, 71, 45, 0.3);
        width: 300rpx;
        margin: 0 auto;
        color: #fff;
      }
      .name {
        position: relative;
        margin-top: 20rpx;
        font-size: 45rpx;
        font-weight: 600;
        color: #fff;
      }
    }
  }
  .list {
    width: 720rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    box-shadow: 10rpx 12rpx 10rpx 10rpx rgba(104, 90, 117, 0.2);
    background: rgba(230, 227, 227, 0.2);
    view {
      width: 100%;
      height: 120rpx;
      border-bottom: 2rpx #999 solid;

      button {
        display: inline-block;
        position: relative;
        background: none;
        font-size: 45rpx;
        width: 100%;
        height: 100%;
        text-align: left;
        color: #999;

        image {
          width: 55rpx;
          height: 55rpx;
          margin-right: 30rpx;
          vertical-align: -8rpx;
        }
        text {
          position: absolute;
          right: 30rpx;
          color: #999;
          font-weight: 600;
        }
      }
    }
  }
  .showPlaylists {
    position: fixed;
    z-index: 10;
    width: 750rpx;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
  }
}
</style>